<template>
    <div class="el-scrollbar__wrap">
        <div class="box">
            <div class="top-box">
                <div class="top_content">
                    <i class="el-icon-menu" style="margin-right: 10px;line-height:30px"></i>
                    通知公告
                </div>
                <div class="top_fan">
                    <el-button type="primary" @click="homeNotice" class="fh">返回</el-button>
                </div>
            </div>
            <div v-if="announcementNotice.isred==0" style="width:100%;display: flex;">
                <div style="font-size:12px;margin-top:10px;width:90%;width:500px;">
                    <p>已查看：
                        <el-button v-for="(item,index) in isread" :key="index" type="text" @click="userInfo(item)">{{item.user.name}}</el-button>
                    </p>
                    <p>未查看：
                        <el-button v-for="(item,index) in noread" :key="index" type="text" @click="userInfo(item)">{{item.user.name}}</el-button>
                    </p>
                </div>
                <div style="width:595px;min-height:842px;vertical-align:middle;box-shadow:2px 2px 10px #909090;position: relative">
                    <h1 style="color:red;text-align:center;padding-top: 35px;font-family:NSimSun;">
                        {{fatherMeanName}}文件
                    </h1>
                    <div style="text-align:center;font-size:12px;padding-bottom:8px;margin:0 70px;border-bottom:2px solid red;">
                        <span>{{announcementNotice.docnumber}}</span>
                    </div>
                    <div>
                        <h3 style="text-align:center;">{{announcementNotice.noticetitle}}</h3>
                    </div>
                    <div style="padding: 10px 70px;font-size:13px;margin-bottom:170px" v-html="announcementNotice.noticecontent"></div>
                    <div style="padding:0 70px;font-size:12px;position: absolute;bottom:50px;width:100%">
                        <div style="text-align:right;margin-bottom:40px;font-size:14px;position:relative;">
                            <officialSeals :companyName="announcementNotice.company.companyName" :departName="announcementNotice.office.name" style="position:absolute;right:-20px;bottom:-60px"></officialSeals>
                            <div>{{announcementNotice.time}}</div>
                        </div>
                        <div style="border-bottom:1px solid #000;margin:8px 0;font-weight:600;padding-bottom:7px">主题词：{{announcementNotice.subjecthead}}</div>
                        <div style="border-bottom:1px solid #000;margin:8px 0;padding-bottom:7px">抄送：{{announcementNotice.person}}</div>
                        <div style="border-bottom:1px solid #000;display:flex;margin:8px 0;padding-bottom:7px">
                            <div  style="flex:1">{{announcementNotice.company.companyName}}</div>
                            <div>{{announcementNotice.remarks}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else style="width:100%;display: flex;">
                <div style="font-size:12px;margin-top:10px;width:90%;width:500px;">
                    <p>已查看：
                        <el-button v-for="(item,index) in isread" :key="index" type="text" @click="userInfo(item)">{{item.user.name}}</el-button>
                    </p>
                    <p>未查看：
                        <el-button v-for="(item,index) in noread" :key="index" type="text" @click="userInfo(item)">{{item.user.name}}</el-button>
                    </p>
                </div>
                <div style="width:595px;height:842px;vertical-align:middle;box-shadow:2px 2px 10px #909090;">
                    <h2 class="noticeTitle">
                        {{announcementNotice.noticetitle}}
                    </h2>
                    <div class="publisher-box">
                        <div class="publisher-box-left">
                            <div class="publisher">
                                发布时间：<span>{{announcementNotice.createDate}}</span>
                            </div>
                        </div>
                        <div class="publisher-box-right">
                            <span>({{ announcementNotice.number}})</span> 浏览次数:
                        </div>
                    </div>
                    <div class="noticeContent" v-html="announcementNotice.noticecontent"></div>
                </div>
                
            </div>
            
            <div class="bottom_upper">
                <el-button type="text" @click="lowNotice">下一条</el-button>
                <el-button type="text" @click="upNotice">上一条</el-button>
            </div>
        </div>
        <el-dialog width="25%" :visible.sync="userInfoDialog" title="用户信息">
            <div>
                <p style="line-height:25px">姓名：{{userInfos.name}}</p>
                <p style="line-height:25px">性别：{{userInfos.sex}}</p>
                <p style="line-height:25px">电话：{{userInfos.phone}}</p>
                <p style="line-height:25px">部门：{{userInfos.office.name}}</p>
                <p style="line-height:25px">岗位：{{userInfos.post.name}}</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="userInfoDialog=false">关闭</el-button>
                <el-button size="small" type="primary" v-if="userInfos.readFlag==0" @click="saveNotify(userInfos.id)">通知TA</el-button>
            </div>
        </el-dialog>
    </div> 
</template>
<script>
import officialSeals from './officialSeals';
export default {
    data(){
        return{
            announcementNotice:{},
            lows:1,//上下页
            upp:0,
            noticeId:"",//通知公告Id
            remark:'',
            isread:[],
            noread:[],
            userInfoDialog:false,
            userInfos:{
                id:'',
                name:'',
                sex:'',
                phone:'',
                office:'',
                post:'',
                readFlag:''
            }
        }
    },
    components:{
        officialSeals
    },
    computed: {
      fatherMeanName: {
        get () {
          return this.$store.state.common.fatherMeanName
        }
      },
    },
    methods:{
        userInfo(obj){
            this.userInfos.id=obj.user.id;
            this.userInfos.name=obj.user.name;
            this.userInfos.sex=obj.user.sex;
            this.userInfos.phone=obj.user.phone;
            this.userInfos.office=obj.user.office;
            this.userInfos.post=obj.user.post;
            this.userInfos.readFlag=obj.readFlag;
            this.userInfoDialog=true;
            
        },
        saveNotify(id){
            this.$http({
                url:'/dlyrl/hr/userinformation/saveNotify',
                method:'post',
                params:{
                    userId:id,
                    noticeId:this.$route.params.id
                }
            }).then(({data})=>{
                if (data.success) {
                    this.$message({message: data.msg,type: 'success'});
                    this.userInfoDialog=false;
                }else{
                    this.$message.error(data.msg);
                }
            })
        },
        getNotices(){
            this.$http({
                url:'/dlyrl/hr/userinformation/getNotice',
                method:'get',
                params:{
                    userId:this.$store.state.user.id,
                    noticeId:this.noticeId
                }
            }).then(({data})=>{
                if (data.success) {
                    this.isread=data.isread;
                    this.noread=data.noread;
                }
            })
        },
        // 获取通知公告Id
        getNoticeId(){
           this.noticeId=this.$route.params.id;//通知公告Id
           this.remark=this.$route.params.remarks;
        //    console.log( this.noticeId)
        },
        // 通知公告详情
        noticeDetails(){
            this.$http({
                url:"/dlyrl/hr/userinformation/findNoticeContent?id="+this.noticeId+"&userId="+this.$store.state.user.id,
                method:'get'
            }).then((res)=>{
                    // console.log("通知公告详情页面",res);
                    this.announcementNotice=res.data.companyNotice;
                })
        },
        // 下一页
        lowNotice(){
            // console.log("当前id",this.noticeId)
            this.$http({
                url:"/dlyrl/hr/userinformation/findNoticeNext?id="+this.noticeId+"&type="+this.lows+'&remarks='+this.remark+"&userId="+this.$store.state.user.id+"&companyId="+this.$store.state.user.companyId,
                method:'get'
            }).then((res)=>{
                    if(res.data.success){
                        this.announcementNotice=res.data.companyNotice;
                        this.noticeId=res.data.companyNotice.id;
                        this.getNotices();
                        // console.log("通知公告详情页面id",this.noticeId)
                    }
                })
        },
        // 上一页
        upNotice(){
            // console.log("当前id",this.noticeId)
            this.$http({
                url:"/dlyrl/hr/userinformation/findNoticeNext?id="+this.noticeId+"&type="+this.upp+'&remarks='+this.remark+"&userId="+this.$store.state.user.id+"&companyId="+this.$store.state.user.companyId,
                method:'get'
            }).then((res)=>{
                    if(res.data.success){
                        this.announcementNotice=res.data.companyNotice;
                        this.noticeId=res.data.companyNotice.id;
                        this.getNotices();
                        // console.log("通知公告详情页面id",this.noticeId);
                    }
                })

        },
        // 返回
         homeNotice(){
            window.history.go(-1)
            // this.$router.push('/mainhome/mainhome');
        }
    },
    activated(){
        this.getNoticeId();
        this.noticeDetails();
        this.getNotices();
    }
}
</script>
<style lang="scss" scoped> 
    .el-scrollbar__wrap{
            background: #fff;
        }
    .box{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        background-color: #fff;
    }
    // 顶部通知公告和返回
    .top_content{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 5px;
        font-size: 12px;
    }
      .top-box{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .top_fan{
        display: flex;
        flex-direction: row-reverse;
    }
    .fh{
        width: 50px !important;
        height: 30px !important;
        font-size: 12px !important;
        padding: 0!important;
    }
    // 通知标题
    .noticeTitle{
        padding-top: 35px;
        text-align: center;
        font-size:24px;
        margin:20px 0;
    }
    // 中间内容顶部标题
    .publisher{
        padding-top: 5px;
        padding-left: 10px;
        font-size: 14px;
        color: #666
    }
     .publisher-box{
        width: 65%;
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        padding-bottom: 15px;
        border-bottom: #d3d3d3 1px solid;
    }
    .publisher-box-left{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .publisher-box-right{
        width: 50%;
        display: flex;
        flex-direction: row-reverse;
        font-size: 14px;
        color: #666;
    }
    // 通知内容
    .noticeContent{
        padding: 30px 70px;
        box-sizing: border-box;
        // text-align: center;
    }
      // 上，下一页
    .bottom_upper{
        position: absolute;
        bottom: 30px;
        right: 40px;
        display: flex;
        flex-direction: row-reverse;
        font-size: 14px;
    }
    .bottom_upper button{
        margin-left:10px ;
        cursor:pointer
    }
</style>
